<template>
    <div class="content_container">
        <!-- editProject -->
        <el-dialog title="编辑项目" :visible.sync="editVisible" width="800px" v-dialogDrag :close-on-click-modal="false"
            :close-on-press-escape="false">
            <el-form ref="form" :model="editForm" label-width="100px" label-position="left">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="合同编号">
                            <el-input v-model="editForm.projectNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="合同名称">
                            <el-input v-model="editForm.projectName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="合同类型">
                            <el-input v-model="editForm.projectType"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否纯分析">
                            <el-input v-model="editForm.pureAnalysis"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="样品个数">
                            <el-input v-model="editForm.sampleCount"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="负责销售">
                            <el-input v-model="editForm.seller"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="引物类型">
                            <el-input v-model="editForm.primerType"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="测序平台">
                            <el-input v-model="editForm.sequencingPlatform"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="测序数据量">
                            <el-input v-model="editForm.sequencingCount"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户单位">
                            <el-input v-model="editForm.customUnit"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="联系人">
                            <el-input v-model="editForm.contacts"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机">
                            <el-input v-model="editForm.mobilePhone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="邮箱">
                            <el-input v-model="editForm.email"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">

                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirmProject">确 定</el-button>
                <el-button @click="editVisible = false">取 消</el-button>
            </span>
        </el-dialog>
        <!-- designProject -->
        <el-dialog title="指定路径" :visible.sync="designVisible" width="360px" v-dialogDrag :close-on-click-modal="false"
            :close-on-press-escape="false">
            <el-form ref="form" :model="designForm" label-width="100px" label-position="left">
                <el-form-item label="服务器">
                    <el-select v-model="designForm.serverCode" placeholder="请选择服务器" clearable>
                        <el-option v-for="(item, index) in serverList" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目路径">
                    <el-input v-model="designForm.projectPath" style="width: 202px;"></el-input>
                </el-form-item>
                <el-form-item label="项目类型">
                    <el-select v-model="designForm.projectCategory" placeholder="请选择项目类型" clearable>
                        <el-option v-for="(item, index) in typeList" :key="index" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirmDesign">确 定</el-button>
                <el-button @click="designVisible = false">取 消</el-button>
            </span>
        </el-dialog>

        <input type="file" id="file-input-common" style="display: none;" @change="fileUpload">
        <div class="left_container management">
            <div class="title_management">
                <h2>项目管理</h2>
            </div>
            <!-- 筛选 -->
            <div class="content_management">
                <div class="select_management">
                    <div class="title">客户：</div>
                    <div class="content">
                        <el-select v-model="queryParams.contacts" placeholder="请选择客户" clearable @change="getList">
                            <el-option v-for="(item, index) in customerList" :key="index" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="title">合同编号：</div>
                    <div class="content">
                        <el-select v-model="queryParams.projectNo" filterable remote reserve-keyword placeholder="请选择项目"
                            :remote-method="remoteMethod" :loading="selectLoading" @change="getList" clearable>
                            <el-option v-for="(item, index) in projectList" :key="index" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="title">关键字查询：</div>
                    <div class="content">
                        <el-input v-model="queryParams.keyword" placeholder="任务名称/用户名" clearable
                            @input="queryKeyword"></el-input>
                    </div>
                    <div class="control">
                        <el-button size="small" type="warning" icon="el-icon-paperclip" @click="importItem"
                            v-if="btnList.includes('importProject')">导入</el-button>
                    </div>
                </div>
                <!-- table -->
                <div class="table_management">
                    <el-table :data="tableData" style="width: 100%" border stripe :header-cell-style="getRowClass"
                        :max-height="maxHeight" v-loading="loading" ref="tableData" :header-row-class-name="headerClass">
                        <!-- <el-table-column type="index" width="50" align="center" fixed>
                        </el-table-column> -->
                        <el-table-column :label="item.label" :prop="item.prop" align="center"
                            v-for="(item, index) in tableList" :key="index" :type="item.type" :width="item.width"
                            :fixed="item.fixed">
                            <template slot-scope="scope">
                                <template v-if="item.type === 'operation'">
                                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                        <el-button size="mini" icon="el-icon-edit-outline"
                                            v-if="btnList.includes('editProject')"
                                            @click="editProject(scope.row)"></el-button>
                                    </el-tooltip>
                                    <el-tooltip class="item" effect="dark" content="指定路径" placement="top">
                                        <el-button size="mini" type="warning" icon="el-icon-thumb"
                                            v-if="btnList.includes('designProject')"
                                            @click="designProject(scope.row)"></el-button>
                                    </el-tooltip>
                                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                        <el-button size="mini" type="danger" icon="el-icon-delete"
                                            v-if="btnList.includes('deleteProject')"
                                            @click="delProject(scope.row.id)"></el-button>
                                    </el-tooltip>
                                </template>
                                <template v-else-if="item.type === 'transferProgress'">
                                    <!-- v-if="scope.row[item.prop]" -->
                                    <div class="progress_items">
                                        <div class="transferProgress">
                                            <el-progress :percentage="Number(scope.row[item.prop] || 0)"></el-progress>
                                        </div>
                                        <el-tooltip class="item" effect="dark" content="刷新进度" placement="top">
                                            <el-button icon="el-icon-check" circle size="mini"
                                                v-if="Number(scope.row[item.prop]) === 100" type="success"
                                                plain></el-button>
                                            <el-button icon="el-icon-refresh" circle size="mini"
                                                @click="refreshProgress(scope.row.id)" v-else></el-button>
                                        </el-tooltip>
                                    </div>
                                </template>
                                <template v-else-if="item.type === 'index'">
                                    {{ scope.$index + 1 }}
                                </template>
                                <template v-else>
                                    {{ scope.row[item.prop] }}
                                </template>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页器 -->
                    <div class="createDate">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="queryParams.pageNo" :page-sizes="[10, 20, 30, 40]"
                            :page-size="queryParams.pageSize" layout="->,total, sizes, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { importProjectRequest, pageProjectManageRequest, getProjectContactsSelectRequest, modifyProjectManageRequest, deleteProjectManageRequest, searchProjectNoRequest, getServerSelectRequest, getTransferProgressRequest, assignProjectPathRequest } from '@/api/management'
import { deepClone, throttle } from '@/utils';
import mixins from './mixins';
import Sortable from 'sortablejs';
export default {
    name: 'BaiaoweifanUiUserIndex',
    mixins: [mixins],
    data() {
        return {
            btnList: this.$store.state.login.buttonPermissionList,
            queryParams: {
                pageNo: 1,
                pageSize: 10,
                contacts: null,
                projectNo: null,
                keyword: null,
            },
            customerList: [],
            projectList: [],
            tableData: [],
            tableList: [
                {
                    fixed: 'left',
                    width: '50',
                    label: '序号',
                    prop: 'index',
                    type: 'index'
                },
                {
                    width: '180',
                    label: '合同编号',
                    prop: 'projectNo'
                },
                {
                    width: '400',
                    label: '合同名称',
                    prop: 'projectName'
                },
                {
                    width: '200',
                    label: '合同类型',
                    prop: 'projectType'
                },
                {
                    width: '100',
                    label: '是否纯分析',
                    prop: 'pureAnalysis'
                },
                {
                    label: '样品个数',
                    prop: 'sampleCount'
                },
                {
                    label: '负责销售',
                    prop: 'seller'
                },
                {
                    label: '引物类型',
                    prop: 'primerType'
                },
                {
                    label: '测序平台',
                    prop: 'sequencingPlatform'
                },
                {
                    width: '100',
                    label: '测序数据量',
                    prop: 'sequencingCount'
                },
                {
                    label: '客户单位',
                    prop: 'customUnit'
                },
                {
                    label: '联系人',
                    prop: 'contacts'
                },
                {
                    width: '150',
                    label: '手机',
                    prop: 'mobilePhone'
                },
                {
                    width: '150',
                    label: '邮箱',
                    prop: 'email'
                },
                {
                    width: '200',
                    label: '服务器',
                    prop: 'serverCode'
                },
                {
                    width: '150',
                    label: '路径',
                    prop: 'projectPath'
                },
                {
                    width: '240',
                    label: '传输进度',
                    prop: 'transferProgress',
                    type: 'transferProgress',
                },
                {
                    width: '200',
                    type: 'operation',
                    label: '操作',
                    prop: '',
                    fixed: 'right',
                },
            ],
            total: 0,
            flag: false,
            selectLoading: false,
            editVisible: false,
            editForm: {},
            designVisible: false,
            designForm: {
                serverCode: '',
                projectPath: '',
                projectCategory: 'metagenome',
            },
            typeList: ['metagenome'],
            serverList: [],
            timter: null,
        };
    },

    mounted() {
        this.init()
        this.getList()
        this.sortDrag();
        this.getSeverList()
        this.timter = setInterval(() => {
            this.getList()
        }, 3000)
    },
    beforeDestroy() {
        clearInterval(this.timter)
        this.timter = null
    },
    methods: {
        async getSeverList() {
            const res = await getServerSelectRequest()
            if (res.code !== 200) return this.$message.error(res.message)
            this.serverList = res.data
        },
        async init() {
            const res = await getProjectContactsSelectRequest()
            if (res.code !== 200) return this.$message.error(res.message)
            this.customerList = res.data
        },
        headerClass() {
            return 'table_header_item'
        },
        sortDrag() {
            let self = this
            this.$nextTick(() => {
                let el = document.querySelector('.table_header_item')
                new Sortable(el, {
                    animation: 150,
                    filter: '.sort-none',
                    onStart() { },
                    onEnd(evt) {
                        // 对数组排序进行调整
                        self.tableList.splice(evt.newIndex, 0, self.tableList.splice(evt.oldIndex, 1)[0])
                        let newArray = self.tableList.slice(0)
                        self.tableList = []
                        self.$nextTick(() => {
                            self.tableList = newArray
                            self.$forceUpdate();
                        })
                    }
                })
            })
        },
        async getList() {
            this.loading = true
            const res = await pageProjectManageRequest(this.queryParams)
            if (res.code !== 200) return this.$message.error(res.message)
            this.loading = false
            this.tableData = res.data.list
            this.total = res.data.total
        },
        //修改页数
        handleSizeChange(val) {
            this.queryParams.pageSize = val
            this.getList(this.queryParams)
        },
        //修改页码
        handleCurrentChange(val) {
            this.queryParams.pageNo = val
            this.getList(this.queryParams)
        },
        viewDetail() {
            this.initForItem()
        },
        async remoteMethod(query) {
            if (query !== '') {
                this.selectLoading = true;
                const res = await searchProjectNoRequest({ projectNo: query })
                if (res.code !== 200) return this.$message.error(res.message)
                this.selectLoading = false;
                this.projectList = res.data
            } else {
                this.projectList = [];
            }
        },
        importItem() {
            document.querySelector(`#file-input-common`).click()
        },
        async fileUpload(e, type) {
            this.file = e.target.files[0];
            if (!this.file) return
            const formData = new FormData();
            formData.append('file', this.file);
            const res = await importProjectRequest(formData)
            if (res.code !== 200) {
                this.$message.error(res.message)
            } else {
                this.$message({ type: 'success', message: res.message })
                this.getList()
                this.init()
            }
            e.srcElement.value = ""
        },
        editProject(row) {
            this.editForm = deepClone(row)
            this.editVisible = true
        },
        async confirmProject() {
            const res = await modifyProjectManageRequest(this.editForm)
            if (res.code !== 200) return this.$message.error(res.message)
            this.$message({ type: 'success', message: res.message })
            this.editVisible = false
            this.getList()
        },
        designProject(row) {
            this.designForm = deepClone(row)
            const item = this.serverList.find(i => i.label === row.serverCode)
            console.log(item, 'item');
            if (item) this.designForm.serverCode = item.value
            this.designVisible = true
        },
        async delProject(id) {
            this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                beforeClose: async (action, instance, done) => {
                    if (action === 'confirm') {
                        const res = await deleteProjectManageRequest(id)
                        if (res.code !== 200) return this.$message.error(res.message)
                        this.$message({ type: 'success', message: res.message })
                        this.getList()
                    } else if (action === 'cancel') {
                        this.$message({
                            message: '取消操作',
                        })
                    }
                    done();
                }
            }).catch(() => { })
        },
        //筛选
        queryKeyword: throttle(function () {
            this.getList()
        }, 500),
        async confirmDesign() {
            const res = await assignProjectPathRequest(this.designForm)
            if (res.code !== 200) return this.$message.error(res.message)
            this.$message({ type: 'success', message: res.message })
            this.getList()
            this.designVisible = false
        },
        async refreshProgress(id) {
            const res = await getTransferProgressRequest({ id })
            if (res.code !== 200) return this.$message.error(res.message)
            const item = this.tableData.find(item => item.id === id)
            item.transferProgress = res.data
        }
    },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
    padding-bottom: 0;

    .el-input__inner {
        height: 35px;
        line-height: 35px;
        border-radius: 4px;
    }

    .el-row {
        display: flex;
        justify-content: space-between;

        .el-col {
            width: 45%;
        }
    }
}

.title_management {
    margin-left: 30px;
}

.content_management {
    margin: 0 20px;

    ::v-deep .el-tabs__item {
        font-size: 20px;
        font-weight: 700;
    }

    ::v-deep .el-tabs__nav-wrap::after {
        width: 0;
    }

    .table_management {
        border: 1px solid #d3ddeb;
        border-radius: 6px;

        .createDate {
            padding-top: 15px;
        }

        .customUnit {
            color: #23896d;
            cursor: pointer;
        }
    }

    .select_management {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        line-height: 50px;
        margin-bottom: 15px;

        ::v-deep .el-input__inner {
            height: 35px;
            line-height: 35px;
            border-radius: 4px;
        }

        .title {
            margin-left: 10px;
        }

    }
}

.control {
    margin-left: 20px;
}

.progress_items {
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    ::v-deep .el-button {
        z-index: 1;
    }

    ::v-deep .el-progress__text {
        display: none;
    }

    .transferProgress {
        width: 180px;
    }
}
</style>